<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link type="text/css" href="<%=request.getContextPath() %>/resource/css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<link type="text/css" href="<%=request.getContextPath() %>/resource/css/jquery.jscrollpane.lozenge.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/common.js"></script>
<style type="text/css">
	.scroll-pane {
		width: 320px;
		height: 595px;
		overflow: auto;
	}
</style>

	<%-- 列表区域 --%>
		<!-- <div class="part-articleList" id="articleListItem">
			<div id="articleList_LAST_FIRST" class="part-articleList-item" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);"><a href="javascript:clickSearchPattern('LAST_FIRST');">新鲜事</a></div>
			<div id="articleList_HOT_FIRST" class="part-articleList-item" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);"><a href="javascript:clickSearchPattern('HOT_FIRST');">最热门</a></div>
			<div style="height: 0px; width: 0px; clear: both;"><input id="searchPattern" type="hidden" value="LAST_FIRST"/></div>
		</div> -->
		<input id="searchPattern" type="hidden" value="LAST_FIRST"/>
		<!-- <div id="indexArticleListDiv" style="float: left;width: 100%;height: 660px;overflow: hidden; background: #FFFFFF;"> -->
		<!-- <div id="indexArticleListDiv" style="float: left;width: 100%;height: 560px; overflow:auto; background: #FFFFFF;"> -->
		
		<div class="scroll-pane">
				<div id="indexArticleListDiv" style="float: left;width: 100%; min-height: 595px; height:auto !important; height:595px; background: #FFFFFF;">
				
				</div>
				
				<div style="clear: both;"></div>
				
				<!-- div class="pageItem" id="pageItem" style="width: 100%; height: 30px; margin-top:5px;">
				</div -->
		</div>
		
<script type="text/javascript">

//
//---------------------------------------- 全局变量 ------------------------------------------------
//


var partArticleListMethod_selectArticleImplementation = function() { alert("partArticleListMethod_selectArticleImplementation is not registered"); };
var partArticleListMethod_registerCallbackWhenArticleSelected = function() { alert("partArticleListMethod_registerCallbackWhenArticleSelected is not registered"); };
var partArticleListMethod_registerGetSearchPattern = function() { alert("partArticleListMethod_registerGetSearchPattern is not registered"); };

<%
	String methodName_selectArticleImplementation = request.getParameter("methodName_selectArticleImplementation");
	String methodName_registerCallbackWhenArticleSelected = request.getParameter("methodName_registerCallbackWhenArticleSelected");
	String methodName_registerGetSearchPattern = request.getParameter("methodName_registerGetSearchPattern");
	
	if (methodName_selectArticleImplementation != null) {
%>
		partArticleListMethod_selectArticleImplementation = <%= methodName_selectArticleImplementation %>;
<%
	}

	if (methodName_registerCallbackWhenArticleSelected != null) {
%>
		partArticleListMethod_registerCallbackWhenArticleSelected = <%= methodName_registerCallbackWhenArticleSelected %>;
<%
	}
	
	if (methodName_registerGetSearchPattern != null) {
%>
		partArticleListMethod_registerGetSearchPattern = <%= methodName_registerGetSearchPattern %>;
<%		
	}
%>

//
//---------------------------------------- 自动执行代码 ------------------------------------------------
//


// 注册话题列表获取成功后的回调方法
partArticleListMethod_registerCallbackWhenArticleSelected(updateWhenArticleSelected);

// 注册获取话题搜索位置范围的回调方法
partArticleListMethod_registerGetSearchPattern(getSearchPattern);



//
//---------------------------------------- 对外公开的函数 ------------------------------------------------
//

// 暂无


//
//---------------------------------------- 私有函数 ------------------------------------------------
//

/*
 * 2013-01-29
 * 鼠标点击更新方法
 */
function clickSearchPattern(Str){
	if(Str){
		document.getElementById("searchPattern").value = Str;
		//让被点击的背景变化
		var articleListItemChilds = document.getElementById("articleListItem").childNodes;
		for (var i = 0; i < articleListItemChilds.length; i++){
			articleListItemChilds[i].className = "part-articleList-item";
			articleListItemChilds[i].onmouseout = function(){
				this.className = "part-articleList-item";
			};
		}
		document.getElementById("articleList_"+ Str).onmouseout = "";
		document.getElementById("articleList_"+ Str).className = "part-articleList-item-mouserover";
		partArticleListMethod_selectArticleImplementation();
	}
}

/*
 *@author zhangchengwei 
 *点击下一页、上一页、首页尾页时调用的方法
 */
function changePage(pageNum, pageView) {
	partArticleListMethod_selectArticleImplementation(pageNum, pageView);
}

//换页点击事件加载
$(".paging-pageChoice").click(changePage);

function getSearchPattern() {
		
	return document.getElementById("searchPattern").value;
}
 
//更新Article List
function updateWhenArticleSelected(dataSet) {
	/* loadingWaiting('articleList', 'indexArticleListDiv'); */
	loadingWaiting("indexArticleListDiv", "indexArticleListDiv", "0");
				var data = dataSet.list;
				if (data.length > 0) {
					
					var articleSummary="";
					$("#indexArticleListDiv").html("");
					for(var i=0;i<data.length;i++) {
						var item = data[i];
						//先创建一个DIV节点,动态产生每个div的ID将，通过ID进行内容的修改 
						/* articleSummary ="<div class='index-articleList-oneArticle' id='article"+i+"'>" */
						articleSummary ="<div class='index-articleList-oneArticle'>"
						
						//第一个DIV
						+	"<div class='index-articleList-oneArticle-top'>"
						+		"<div class='index-articleList-oneArticle-authorLogo'>"
						+			"<img alt='' src='' style='width: 38px; height: 38px;' id='index-articleList-oneArticle-top-img" +i+ "'/>"		
						+		"</div>"
						
						+		"<div class='index-articleList-oneArticle-authorMessage'>"
						+			"<div class='index-articleList-oneArticle-authorMessage-name'>"
						/* +				"<a id='index-articleList-oneArticle-authorMessage-name" +i+ "' target='_blank'></a>" */
						/* +				"<span style='display: block; float: left; margin-left: 15px;'><img src=''/></span>" */
						+				"<span id='index-articleList-oneArticle-authorMessage-name" +i+ "' style='display:block; float:left; margin-left:15px; color:#0078B6;font-weight:bold;'></span>"
						+				"<span style='display: block; float: left; margin-left: 15px;'><img src=''/></span>"
						/* +				"<span style='margin-top:-5px; float:right; margin-right: 5px; color:#444444;' id='index-articleList-oneArticle-articleModel-articleOthers-subbmitTime" +i+ "'></span>" */
						+				"<span style='display:block; margin-top:-3px; float:right; margin-right:5px; color:#444444;' id='index-articleList-oneArticle-articleModel-articleOthers-subbmitTime" +i+ "'></span>"
						+				"<span style='clear: both;'></span>"
						+			"</div>"
						+			"<div class='index-articleList-oneArticle-authorMessage-others' id='index-articleList-oneArticle-authorMessage-others" +i+ "'>"
						+				"<span id='index-articleList-oneArticle-authorMessage-others-topic" +i+ "'></span>" 
						+			"</div>"
						+		"</div>"
						+		"<div style='clear:both;'></div>"
						+	"</div>"
						//分隔线，虚线
						+	"<div class='index-articleList-oneArticle-in-separate'></div>"
						//第二个DIV
						+	"<div class='index-articleList-oneArticle-articleModel'>"
						+		"<div class='index-articleList-oneArticle-articleModel-articleTitle'><a id='index-articleList-oneArticle-articleModel-articleTitle" +i+ "' target='_blank'></a></div>"
						+		"<div class='index-articleList-oneArticle-articleModel-articleOthers' id='index-articleList-oneArticle-articleModel-articleOthers" +i+ "'>"
						+			"<span id='index-articleList-oneArticle-articleModel-articleOthers-replay" +i+ "'></span>"
						+			"<i style='margin: 0 6px 0 8px; vertical-align: 0px; color: #AEAEAE;'>|</i>"
						+			"<span id='index-articleList-oneArticle-articleModel-articleOthers-browse" +i+ "'></span>"
						+		"</div>"
						+	"</div>"
						+"</div>"
						//分隔线，实线
						+	"<div class='index-articleList-oneArticle-bottom-separate'></div>";
						
						$("#indexArticleListDiv").append(articleSummary);
						
						/* loadingWaiting('indexArticleListDiv', 'article'); */
						
						var authorImgId = "#index-articleList-oneArticle-top-img" + i;
						$(authorImgId).attr("src", item.articleAuthorLogoUrl);
						var authorNameId = "#index-articleList-oneArticle-authorMessage-name" + i;
						$(authorNameId).html(item.articleAuthorName);
						/* $(authorNameId).attr("href", "javasctipt:void(0)"); */
						var sexImg = '../resource/images/user/man.png';
						if (item.articleAuthorSex == 'MALE'){
							sexImg = '../resource/images/user/man.png';
						} else if (item.articleAuthorSex == 'FEMALE') {
							sexImg = '../resource/images/user/woman.png';
						}
						$(authorNameId).parent().find('img').attr("src", sexImg);
						//alert($(authorNameId).parent().find('img').html());
						var articleId = "#index-articleList-oneArticle-authorMessage-others-topic" +i;
						$(articleId).html(item.articleAuthorStatement);
						var articleTitleId = "#index-articleList-oneArticle-articleModel-articleTitle" + i;
						var title = item.articleTitle;
						if (title.length > 20) {
							title = title.substr(0, 18) +"...";
						}
						$(articleTitleId).html(title);
						$(articleTitleId).attr({"href": "../article/showArticleDetails?id=" +item.articleId});
						$(articleTitleId).mouseover(function(){
								var hre =this.href;
								var atcId = hre.substring((hre.indexOf("=")+1));
								showArticleMessageInMap("articleMessage"+atcId);
							});
						$(articleTitleId).mouseout(function(){
								var hre =this.href;
								var atcId = hre.substring((hre.indexOf("=")+1));
								hiddenArticleMessageFromMap("articleMessage"+atcId);
							});
						var articleReplyId = "#index-articleList-oneArticle-articleModel-articleOthers-replay" + i;
						$(articleReplyId).html("回复(" + "0" + ")");
						var articleReadId = "#index-articleList-oneArticle-articleModel-articleOthers-browse" + i;
						$(articleReadId).html("查看(" + "0"+ ")");
						var articleSubmitDate = "#index-articleList-oneArticle-articleModel-articleOthers-subbmitTime" + i;
						$(articleSubmitDate).html(item.articleSubmitDate);
						
//						loadingWaiting("", "", "2");

						/* loadingWaiting('indexArticleListDiv', 'article' +i); */

					}
					var pageView = dataSet.pageView;
					var firstPage = dataSet.firstPage;
					var lastPage = dataSet.lastPage;
					var currentPage = dataSet.currentPage;
					var preView = dataSet.preView;
					var nextView = dataSet.nextView;
					var preViewHtmlStr = "";
					var nextViewHtmlStr = "";
					var centerPageNumHtmlStr = "";

					if (currentPage > firstPage) {
						preViewHtmlStr += "<a href='javascript:changePage(\""+(currentPage-1)+"\", \""+pageView+"\");'>&lt;上一页&nbsp;</a>";
					} else if(preView != "") {
						preViewHtmlStr += "<a href='javascript:changePage(\""+(firstPage-1)+"\", \""+preView+"\");'>&lt;上一页&nbsp;</a>";
					}

					if(preView != "") {
						preViewHtmlStr += "<a href='javascript:changePage(\""+(firstPage-1)+"\", \""+preView+"\");'>&nbsp;...&nbsp;</a>";
					}
					
					for (var i = firstPage; i <= lastPage; i++) {
						if (i == currentPage) {
							//让显示的超链接颜色不一样
							centerPageNumHtmlStr += "<b>"+i+"&nbsp;</b>";
						} else {
							centerPageNumHtmlStr += "<a href='javascript:changePage("+i+", \""+pageView+"\")'>"+i+"&nbsp;</a>";
						}
					}

					if(nextView != "") {
						nextViewHtmlStr += "<a href='javascript:changePage(\""+(lastPage+1)+"\", \""+nextView+"\");'>&nbsp;...&nbsp;</a>";
					}
					if (currentPage < lastPage) {
						nextViewHtmlStr += "<a href='javascript:changePage(\""+(currentPage+1)+"\", \""+pageView+"\");'>&nbsp;下一页&gt;</a>";
					} else if(nextView != "") {
						nextViewHtmlStr += "<a href='javascript:changePage(\""+(lastPage+1)+"\", \""+nextView+"\");'>&nbsp;下一页&gt;</a>";
					}
					
					var pegeNumItemHtmlStr = "<p align='center' style='margin: 5px 0 10px 0; font-size: 13px; height: 20px; width: 100%;'>" + preViewHtmlStr + centerPageNumHtmlStr + nextViewHtmlStr +"</p>";

					$("#indexArticleListDiv").append(pegeNumItemHtmlStr);
					//$("#pageItem").html(pegeNumItemHtmlStr);
				}
				else {
					$('#indexArticleListDiv').html('当前过滤信息下，暂时没有话题帖子！');
				}
				var indexArticleListDivHeight = $('#indexArticleListDiv').height();
				$('#indexArticleListDiv').height(indexArticleListDivHeight);
				$('.scroll-pane').jScrollPane();
}

</script>